<template>
  <div class="dog" @click="$emit('love',dogName)">
    <img src="../img/狗.png" alt="">
    <p @click.stop='fn' :style="{ backgroundColor:colorStr}">{{dogName}}</p>
  </div>
</template>

<script>
export default {
    props:['dogImgUrl','dogName'],
    name:'HmDog',
  data(){
    return {
        colorStr:'',
   
    }
  },
  methods:{
    fn(){
 // eslint-disable-next-line no-undef
 this.colorStr=`rgb(
${this.rgb1()},
 ${this.rgb1()},
 ${this.rgb1()})`
//  向父级发送请求
 
    },
    rgb1(){
    return    Math.floor(Math.random()*256)
    },
   
  }
}
</script>

<style scoped>
.dog{
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  float: left;
  text-align: center;
    margin-left: 10px;
   
}
.dog img{
  width: 100%;

}
</style>